<template>
    <div >
        <div class="tag" v-loading="loading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
            <div>
                <el-tooltip content="摩尔的全部贴帖~" placement="bottom" effect="light">
                    <el-tag @click="getAskList(0)"
                            class="tags" type="danger" :effect="typeId === 0 ? 'dark' : 'plain'">
                        全部
                    </el-tag>
                </el-tooltip>
            </div>
            <div v-for="item in typeList"
                 :key="item.id">
                <div v-if="item.typeDes">
                    <el-tooltip :content="item.typeDes" placement="bottom" effect="light">
                        <el-tag @click="getAskList(item.id)" class="tags" type="warning"
                                :effect="typeId === item.id ? 'dark' : 'plain'">
                            {{ item.typeName }}
                        </el-tag>
                    </el-tooltip>
                </div>
                <div v-else>
                    <el-tag @click="getAskList(item.id)"
                            class="tags" type="warning"
                            :effect="typeId === item.id ? 'dark' : 'plain'">
                        {{ item.typeName }}
                    </el-tag>
                </div>
            </div>
        </div>
        <div class="ask"  v-loading="loading1"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading">
            <div>
                <div v-if="askList[0]" class="wen">
                    <el-card style="margin-bottom: 10px" v-for="item in askList" :key="item.id">
                        <el-row>
                            <span style="color: #415969">{{item.username}}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span style="color: #71777c">{{(new Date(item.createTime).getFullYear() === new Date().getFullYear()) ?
                                (new Date(item.createTime).getMonth() === new Date().getMonth() ?
                                (new Date(item.createTime).getDate() === new Date().getDate() ? '今天'+ (new Date(item.createTime).getHours()) + ":" + (new Date(item.createTime).getMinutes())
                                :  new Date().getDate() - new Date(item.createTime).getDate() + '天前')
                                : new Date().getMonth() - new Date(item.createTime).getMonth() + '月前')
                                : new Date().getFullYear() - new Date(item.createTime).getFullYear() + '年前' }}</span>
                        </el-row>
                        <p @click="ToReply(item)" class="title">{{item.title}}</p>
                        <p class="txt">{{item.content | ellipsis}}</p>
                        <el-row style="display: flex">
                            <vue-clap-button :maxClick="10" @cancel="ToCancel" @clap="ToPraise(item.id)" :colorNormal="'#f3a683'" :colorActive="'#e15f41'" :size="6" />
                            <span style="margin-left: 16px;" class="bto">{{item.praise}}</span>

                            <img  class="icons" style="margin-left: 30px;" src="../../assets/icon/answer.svg" alt="点赞">
                            <span class="bto">{{item.agreeId ? '已采纳' : '回答中'}}</span>

                            <img @click="ToReply(item)" class="icon" style="margin-left: 30px;" src="../../assets/icon/comment.svg" alt="点赞">
                            <span @click="ToReply(item)" class="bto">去回答</span>
                        </el-row>
                    </el-card>
                </div>
                <div v-else class="wen">
                    <div style="display: flex;align-items: center;flex-direction: column">
<!--                        <img class="nosearch" src="../assets/img/nosearch.svg" alt="">-->
<!--                        <p>该分类暂无提问哦</p>-->
<!--                        <el-button plain type="success" @click="ToQuest">-->
<!--                            <i class="el-icon-edit-outline"></i>-->
<!--                            我要提问-->
<!--                        </el-button>-->
                    </div>

                </div>
            </div>
        </div>

        <div class="foots">
            <div class="pic">
                <img src="../../assets/img/moer.png" class="pic_moer" alt="">
            </div>
            欢迎来到摩尔贴帖~
        </div>

    </div>
</template>

<script>
    export default {
        name: "Home",
        data(){
            return{
                typeList:[],
                loading:true,
                loading1:true,
                typeId:0,
                askList:[],
            }
        },
        created() {
            this.getTypeList();
            this.getAskList(0);
        },
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 32) {
                    return value.slice(0, 32) + '...'
                }
                return value
            },
        },
        methods:{
            async getTypeList(){
                this.loading = true
                const { data: res } = await this.$http.get('/type/')
                console.log(res)
                if (res.code !== 200){
                    this.loading = true
                    return this.WarningMsg(res.msg)
                }
                this.typeList = res.data
                if(res.data.length == this.typeList.length) {
                    this.loading = false
                }
            },
            async getAskList(typeId){
                this.loading1 = true
                this.typeId = typeId
                const { data: res } = await this.$http.get('/type/findBytype/'+ this.typeId)
                console.log(res)
                if (res.code !== 200){
                    this.loading1 = false
                    return this.WarningMsg(res.msg)
                }
                this.askList = res.data
                if(res.data.length == this.askList.length) {
                    this.loading1 = false
                }
            },
            async ToPraise(id){
                this.loading1 = true
                const { data: res } = await this.$http.get('/ask/praise/'+ id)
                console.log(res)
                if (res.code !== 200){
                    this.loading1 = true
                    return this.WarningMsg(res.msg)
                }
                this.getAskList(this.typeId)
                this.loading1 = false
            },
            ToCancel(){

            },
            ToReply(question){
                this.$router.push({
                    path: '/user/Reply',
                    query: {data:JSON.stringify(question),IsMine:0}
                })
            },
            WarningMsg(msg) {
                const h = this.$createElement;
                this.$notify.warning({
                    title: '提示',
                    message: h('p', {style: 'color: #e15f41'}, msg),
                    offset: 100,
                    duration: 3000
                });
                if (msg === '无此权限'){
                    window.sessionStorage.clear()
                    localStorage.clear()
                    this.$router.push('/Login')
                }
            },
        }
    }
</script>

<style scoped>
    .tag{
        display: flex;
        margin-top: 20px;
        justify-content: center;
    }
    .tags{
        margin-left: 20px;
        cursor: pointer;
    }
    .ask{
        margin-top: 10px;
    }
    .wen{
        width: 68%;
        margin-left: 16%;
        font-size: 10px;
    }

    .title{
        font-weight: 700;
        font-size: 11px;
        line-height: 24px;
        color: #1d2129;
        margin-bottom: 12px;
        cursor: pointer;
    }

    .txt{
        color: #4e5969;
        height: 44px;
        font-size: 10px;
    }
    .icon{
        width: 13px;
        height: 13px;
        vertical-align: middle;
    }
    .icons{
        width: 11px;
        height: 11px;
        vertical-align: middle;
        margin-right: 4px;
    }

    .bto{
        color: #ea8685;
        cursor:pointer;
        font-size: 9px;
    }
    .foots{
        width: 100%;
        font-size: 8px;
        margin-top: 30px;
        height: 20px;
        text-align: center;
        color: #ea8685;
        position: relative;
    }
    .pic{
        position: fixed;
        left: 0%;
        top: 23%;
        width: 116px;
        height: 116px;
    }
    .pic_moer{
        width: 100%;
        height: 100%;
        opacity: 0.2;
        /*margin-left: 1%;*/
    }
</style>
